<template>
  <view class="pageWarp" :style="{backgroundImage: `url(${imgUrl}loginBg.png)`}">
		<!-- 登录操作按钮 -->
    <view class="btn-box">
			<u-button
				shape="circle"
				text="一键授权登录"
				color="linear-gradient(108deg, #fb9118 0%, #ff7a27 99%)"
				@click="getCode"
			/>
			<u-button
				shape="circle"
				color="#eee"
				:customStyle="{color:'#333', marginTop:'46rpx'}"
				text="暂不登录返回首页"
				@click="goHome"
			/>
    </view>
		<!-- 手机号授权弹窗 -->
		<u-modal :show="modalShow" title="提示" :showConfirmButton="false">
			<view class="slot-content">
				<view>请授权您的手机号，以提供更好的服务</view>
				<button @getphonenumber="onGetPhoneNumber" open-type="getPhoneNumber">授权</button>
			</view>
		</u-modal>
  </view>
</template>

<script>
import { imgUrl } from "@/utils/baseUrl.js";
import { loginFun, mandateTel } from "@/api/user.js";
export default {
  data() {
    return {
      imgUrl,
			modalShow: false,
			sourceSign: ''
    }
  },
  onLoad(option) {
		this.sourceSign = option.sourceSign || ''
	},
  methods: {
		// 手机号授权
		onGetPhoneNumber(e) {
			const token = `Beare ${uni.getStorageSync("token")}`
			mandateTel({
				code: e.detail.code,
				token
			}).then(() => uni.navigateBack())
		},
		// 用户登录
		confirmLogin(code) {
			loginFun({
				code,
				sourceSign: this.sourceSign
			}).then((res) => {
				uni.setStorageSync("token", res.tokenConfig.token)
				this.$store.dispatch("setUserInfo", res.user)
				/* 兼容蓝牙模块 */
				uni.setStorageSync("rhr", res.user.rhr);
				uni.setStorageSync("weight", res.user.weight);
				if (!!res.user.device_type) {
					uni.setStorageSync("selectedScanDevice", res.user.device_type);
				}
				/* 兼容蓝牙模块 */
				if (res.user.mobile) {
					this.goHome()
					// uni.navigateBack()
				} else {
					this.modalShow = true;
				}
			})
		},
		// 前往首页
		goHome() {
			uni.switchTab({url: '/pages/index/index'})
		},
		// 使用获取用户微信登录code
    getCode() {
			uni.login({
				provider: "weixin",
				success: (e) => this.confirmLogin(e.code)
			})
    }
  }
};
</script>

<style lang="scss" scoped>
.pageWarp {
	height: 100vh;
	background-size: 100% 50vh;
	background-repeat: no-repeat;
	padding: calc(50vh + 100rpx) 20rpx 0 20rpx;
}
.slot-content button {
	background: linear-gradient(108deg, #fb9118 0%, #ff7a27 99%);
	color: #fff;
	margin-top: 50rpx;
	border-radius: 100px;
}
</style>